<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="60px">
      <el-form-item label="查询栏" prop="monitorId">
        <el-select v-model="queryParams.monitorId" placeholder="请选择DO检测仪名称" style="width:100%"
          @keyup.enter.native="handleSelect()" clearable>
          <el-option v-for="(dict, index) in nameList" :key="index" :label="dict.monitorName" :value="dict.monitorId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" style="width:100%" clearable>
          <el-option v-for="(dict, index) in ['正常', '偏低', '偏高']" :key="index" :label="dict" :value="index + ''">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="dateArr">
        <el-date-picker v-model="queryParams.dateArr" @keyup.enter.native="handleSelect"
          value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSelect">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getmonitordevicerList } from "@/api/record/index.js";
export default {
  data () {
    return {
      // 查询参数
      queryParams: {
        monitorId: undefined,
        status: undefined,
        dateArr: undefined
      },
      nameList: []
    }
  },
  mounted () {
    this.getinit()
  },
  methods: {
    async getinit () {
      let data = await getmonitordevicerList();
      this.nameList = data.rows
    },
    resetQuery () {
      for (const key in this.queryParams) {
        this.queryParams[key] = null
      }
      this.$emit('handleQuery', this.queryParams)
    },
    handleSelect () {
      let params = {
        ...this.queryParams,
        beginTime: this.queryParams.dateArr && this.queryParams.dateArr.length !== 0 && this.queryParams.dateArr[0],
        endTime: this.queryParams.dateArr && this.queryParams.dateArr.length !== 0 && this.queryParams.dateArr[1]
      }
      this.$emit('handleQuery', params)
    }
  }
}
</script>

<style>

</style>